<template xmlns="http://www.w3.org/1999/html">
<!--  好友申请页面-->
  <van-tabs v-model:active="active" @change="onTabChange">
    <van-tab name="receive">
      <template #title>
        <van-icon name="bullhorn-o"/>
        我收到的
      </template>
    </van-tab>
    <van-tab name="apply">
      <template #title>
        <van-icon name="guide-o" size="18"/>
        我的申请
      </template>
    </van-tab>
  </van-tabs>
  <van-empty v-if="applyFriends.length<1 && active == 'receive' " description="暂无申请"/>
  <van-empty v-if="myApplyFriends.length<1 && active == 'apply' " description="你还未申请好友"/>
  <van-list
      v-model:loading="loading"
      :finished="finished"
      :finished-text="(applyFriends.length > 0 || myApplyFriends.length > 0)? '没有更多了' :'' "
      @load="loadApply"
  >
    <!--  我收到的申请  -->
    <div class="friend-card" v-for="friend in applyFriends" v-if="active == 'receive'"
    >
      <van-image class="friend-avatar" round
                 :src="friend.applyUser.avatarUrl"/>
      <div class="friend-profile">
        <div class="friend-name">
          {{ friend.applyUser.username.slice(0, 10) }}
        </div>
        <div class="friend-remark">
          {{ friend.remark }}
        </div>
      </div>
      <div class="friend-applyStatus">
        <van-button @click="agree(friend.applyUser.id)" size="small"
                    v-if="friend.status === friendApplyStatusEnum['NOT_DEAL']"
                    type="default" style="width: 80px; margin-right: 10px">接受
        </van-button>
        <p class="apply" v-if="applyStatus.includes(friend.status)">
          <van-icon :name="iconName[friend.status]" size="16px"/>
          {{
            friend.status === friendApplyStatusEnum['CANCEL'] ? '对方' : ''
                + friendApplyStatusShowEnum[friend.status]
          }}
        </p>
      </div>
    </div>
    <!-- 我的申请 -->
    <div class="friend-card" v-for="friend in myApplyFriends"
         v-if="active == 'apply'">
      <van-image class="friend-avatar" round
                 :src="friend.applyUser.avatarUrl"/>
      <div class="friend-profile">
        <div class="friend-name">
          {{ friend.applyUser.username.slice(0, 10) }}
        </div>
        <div class="friend-remark">
          {{ friend.remark }}
        </div>
      </div>
      <div class="friend-applyStatus">
<!--        <van-button @click="agree(friend.applyUser.id)" size="small"
                    v-if="friend.status === friendApplyStatusEnum['NOT_DEAL']"
                    type="default" style="width: 80px; margin-right: 10px">接受
        </van-button>-->
        <p class="apply" v-if="applyStatus.includes(friend.status)">
          <van-icon :name="iconName[friend.status]" size="16px"/>
          {{
            (!showMyApply.includes(friend.status) ? '对方' : '') +
            friendApplyStatusShowEnum[friend.status]
          }}
        </p>
      </div>
    </div>
  </van-list>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {FriendRecordsVO} from "../models/friends";
import {ResponseResult} from "../models/resopnse";
import myAxios from "../plugins/myAxios";
import {showFailToast, showSuccessToast, showToast} from "vant";
import {friendApplyStatusEnum, friendApplyStatusShowEnum} from "../constants/friends.ts";

const showMyApply: number[] = [2, 3]
const applyStatus: number[] = [1, 2, 3]
const iconName: { [status: number]: string } = {
  1: 'certificate',
  2: 'warning-o',
  3: 'delete-o'
}

const active = ref<string>('receive')

const finished = ref<boolean>(false);
const loading = ref<boolean>(false)

const applyFriends = ref<FriendRecordsVO[]>([])
const myApplyFriends = ref<FriendRecordsVO[]>([])

const onTabChange = async (name: string) => {
  console.log('当前是：' + name)
  await loadApply()
}

const agree = async (fromId: number) => {
  // alert('agree:' + fromId)
  const res: ResponseResult<boolean> = await myAxios.post('/friends/agree', {
    id: fromId,
  })
  /*.then((response) => {
    return response.data
  }).catch((error) => {
    console.log('/friends/agree error', error)
    showFailToast('同意申请异常')
  })*/

  if (res.code === 0 && res.data) {
    showSuccessToast('同意好友申请')
    await loadApply()
  } else {
    showFailToast('同意好友申请失败')
    showToast(res.description)
  }
}

const loadApply = async () => {
  start()
  const name: string = active.value
  let res: ResponseResult<FriendRecordsVO[]>
  if (name == "receive") {
    res = await myAxios.get('/friends/getRecords')
    applyFriends.value = res.data
  } else {
    res = await myAxios.get('/friends/getMyApplyRecords')
    myApplyFriends.value = res.data
  }
  end()
}

const start = () => {
  loading.value = true;
  finished.value = false;
}
const end = () => {
  loading.value = false
  finished.value = true
}

</script>

<style scoped>
.van-list {
  margin-top: 10px;
  margin-left: 8px;
}

.friend-card {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  margin-left: 10px;
}

.friend-avatar {
  width: 3rem;
  height: 3rem;
}

.friend-profile {
  flex-grow: 1;
  margin-left: 10px;
}

.friend-name {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}

.friend-remark {
  font-size: 10px;
  margin-top: -10px;
  color: #999;
}

.friend-applyStatus {
  display: flex;
  align-items: center;
  padding-right: 15px;
  margin-bottom: 3px;
  height: 55px;
}

.apply {
  font-size: 13px;
  color: #999;
  width: 85px;
}
</style>
